<template>
  <div>
    <ylheader :leftsvg="true" :title="'系统消息'"></ylheader>
    <div class="loadmore-container" ref="sysmsgwrapper">
      <div class="loadmore-ul">
        <div v-if="ismsgempty">
          <div class="shuoshuo-new">
            <span class="yl-2kong nosvg">
              <span class="path1">
                <span class="path2">
                  <span class="path3">
                    <span class="path4">
                      <span class="path5">
                        <span class="path6">
                          <span class="path7">
                            <span class="path8">
                              <span class="path9"></span>
                            </span>
                          </span>
                        </span>
                      </span>
                    </span>
                  </span>
                </span>
              </span>
            </span>
            <span class="no-text">还没有收到消息，快去跟大家互动吧！</span>
          </div>
        </div>
        <div class="whiteback" v-else>
          <ul>
            <li class="msgcontainer" v-for="(item,index) in msgData" :key="index" @click="godetail(item,index)" :class="{noborder:index==msgData.length-1}">
              <span class="tipscontainer">
                <span class="span-msg sysmsgicon a-c" >系统</span>  
                <div class="myMessage-tip sysmsg-tip" v-if="item.isRead==0"/>
              </span>
                <span class="contentcontainer">
                  <span class="span-content" v-html="item.rec_content"></span>
                  <div class="imgcontainer"  v-if="item.isPersonNews==1">
                    <img  v-for="(items,index) in item.picUrls" :key="index" v-lazy.container ="items.src"  class="sysimg">
                  </div>
                  <span class="span-time">{{item.time}}</span>
                </span>
            </li>
          </ul>
        </div> 
         <p style="padding-bottom:0.2rem"></p>
      </div>
    </div>
  <!--标为已读--> 
    <div class="allread_container" @click="allread()">
      <div>
        <span>标为</span>
        <span>已读</span>
      </div>
    </div>
  </div>
</template>
<script>
import api from "src/api/index";
import { mapState, mapMutations } from "vuex";
import Vue from "vue";
export default {
  name: "sysmsg",
  data() {
    return {
      page: 1,
      totalPage: 1,
      is_r: false,
      msgData: [],
      ismsgempty: false,
    };
  },
  computed: {
    ...mapState(["notreadmsg"])
  },
  beforeRouteLeave(to, from,next){
    this.allread();
    next();
  },
  mounted() {
    this.getMessageData().then(res => {
      return this.initScroll();
    });
  },
  methods: {
    ...mapMutations(["changenotreadmsg"]),
    //识别文本url
    getSysTextUrl(list){
      const texturl = "<a href=";
      _each(list,(v,i)=>{
        if(v.rec_content&&v.rec_content.indexOf(texturl)==-1){
          v.rec_content = this.$util.getTextUrl(v.rec_content);
        }
      })
    },
    getMessageData() {
      let p = new Promise((resolve, reject) => {
        const params = { clazz: 12, page: this.page, limit: 10 };
        api.getMyMessage(params).then(res => {
          if (res.success) {
            this.msgData = this.is_r
              ? [...this.msgData, ...res.data.list]
              : res.data.list;
            this.getSysTextUrl(this.msgData);
            this.totalPage = res.data.totalPage;
            if (this.msgData.length == 0) {
              this.ismsgempty = true;
            } else {
              this.ismsgempty = false;
            }
            if (this.page < res.data.totalPage) {
              this.is_r = false;
            }
            if (this.myscroll) {
              this.$nextTick(() => {
                setTimeout(() => {
                  this.myscroll.refresh();
                });
              });
            }
          }
          resolve("获取我的消息数据...");
        });
      });
      return p;
    },
    initScroll() {
      let p = new Promise((resolve, reject) => {
        this.$nextTick(() => {
          let sysmsgwrapper = this.$refs.sysmsgwrapper;
          let _this = this;
          _this.myscroll = new iScroll(sysmsgwrapper, {
            //上拉时触发
            onScrollMove: function() {
              if (
                this.y <= this.wrapperH - this.scroller.clientHeight - 50 &&
                _this.is_r == false
              ) {
                _this.is_r = true;
                //加载数据
                setTimeout(() => {
                  if (_this.page < _this.totalPage) {
                    _this.page += 1;
                    _this.getMessageData();
                  }
                }, 0);
              }
            },
            //上拉之后如果触发刷新则 状态图标值为1 显示loading状态
            onScrollEnd: function() {},
            onScrollStart: function() {
              if (
                localStorage.tempPageHeight !=
                document.getElementsByClassName("loadmore-ul")[0].scrollHeight
              ) {
                this.refresh();
                localStorage.tempPageHeight = document.getElementsByClassName(
                  "loadmore-ul"
                )[0].scrollHeight;
              }
            }
          });
          resolve("下啦 ...");
        });
        resolve("初始化scroll ...");
      });
      return p;
    },
    allread() {
      api.sysMsgIsRead().then(res => {
        if (res.success) {
          this.updatadata();
          this.updatanotreadnum();
        }
      });
    },
    updatanotreadnum() {
      //标为已读更新消息未读数
      const numobj = {
        notReadLike: this.notreadmsg.notReadLike,
        notReadComment: this.notreadmsg.notReadComment,
        notreadleavemsg: this.notreadmsg.notreadleavemsg,
        notreadrec: this.notreadmsg.notreadrec,
        notReadSysMsg: 0
      };
      this.changenotreadmsg(numobj);
    },
    godetailupdatanotread() {
      const numobj = {
        notReadLike: this.notreadmsg.notReadLike,
        notReadComment: this.notreadmsg.notReadComment,
        notreadleavemsg: this.notreadmsg.notreadleavemsg,
        notreadrec: this.notreadmsg.notreadrec,
        notReadSysMsg: this.notreadmsg.notReadSysMsg - 1
      };
      this.changenotreadmsg(numobj);
    },
    updatadata() {
      _each(this.msgData, (v, i) => {
          if(v.isRead==0){
            v.isRead = 1;
            Vue.set(this.msgData, i, this.msgData[i]);
          }
      });
    },
    //更新某条未读记录
    updataindexdata(item, index) {
      if(item.isRead==0){
        item.isRead = 1;
        Vue.set(this.msgData, index, this.msgData[index]);
      }
    },

    godetail(item, index) {
      this.updateread(item,index);
      this.godetailupdatanotread();
    },
    //更新消息阅读状态
    updateread(item,index) {
      api.Updateread({ id: item.id }).then(res => {
        if (res.success) {
          this.updataindexdata(item, index);
        }
      });
    }
  },
  components: {
    api
  }
};
</script>
<style lang="less" scoped>
.noborder {
  border: none !important;
}
.msgcontainer {
  display: flex;
  min-height: 1.7rem;
  border-bottom: 1px solid #e6e6e6;
  margin: 0 0.3rem 0 0.3rem;
}
.sysmsgicon {
  background-color: #f6b766;
  margin-top: 0.37rem;
}
.sysmsg-tip {
  top: 0.32rem;
}
.contentcontainer {
  display: flex;
  flex-direction: column;
  margin:0.28rem 0 0.1rem 0.92rem;
  line-height: 0.5rem;
  .span-content {
    font-size: 0.26rem;
    line-height: 0.42rem;
    color: #111111;
  }
  .span-time {
    font-size: 0.22rem;
    color: #999999;
  }
}
.tipscontainer{
  position: relative;
}
.imgcontainer{
  // width: 5.9rem;
}
.sysimg{
    width: 1.9rem;
    height: 1.46rem;
    float: left;
    margin-right: .08rem;
    margin-top: .08rem;
    border-radius: 3px
}
</style>
